<template>
	<div class="card" id="bill-detail-hotel">
	  <div class="card-header">酒店预订明细</div>
    <table class="table table-striped table-hover talbe-sm">
        <thead>
            <tr>
                <th>乘客</th>
                <th>酒店</th>
                <th>入住日期</th>
                <th>离店日期</th>
                <th>房型</th>
                <th>房间数</th>
                <th>销售价</th>
                <th>底价</th>
                <th>服务费</th>
                <th>间夜</th>
                <th>总金额</th>
                <th>总成本</th>
                <th>利润</th>
                <th>备注</th>
            </tr>
        </thead>
        <tbody>
            <template  v-for="info in detailInfo.hotelBookings">
              <tr :key="info.id">   
                  <td>
                      {{info.passengerName}}
                  </td>
                  <td>{{info.hotelName}}</td>
                  <td>{{info.ddate}}</td>
                  <td>{{info.leaveDate}}</td>
                  <td>{{info.roomType}}</td>
                  <td>{{info.roomCount}}</td>
                  <td>{{info.price}}</td>
                  <td>{{info.bottomPrice}}</td>
                  <td>{{info.serviceCharge}}</td>
                  <td>{{info.count}}</td>
                  <td>{{info.totalAmount}}</td>
                  <td>{{info.totalCost}}</td>
                  <td>{{info.profit}}</td>
                  <td>{{info.remark}}</td>
                </tr>
            </template>

        </tbody>
    </table>	
  </div>
</template>

<script>
  export default {
    props: {
      detailInfo: {
        type: Object
      }
    }
  }		
</script>